<template>
  <div class="checkedIcon" :class="{active:ischecked}">
    <div class="dot" v-show="ischecked"></div>
  </div>
</template>

<script>
  export default {
    props:{
      ischecked:{
        type:Boolean,
        default(){
          return false
        }
      }
    },
    data(){
      return {}
    }
  }
</script>

<style scoped>
  .checkedIcon{
    width:18px;
    height:18px;
    border:1px solid #ccc;
    position:relative;
    border-radius:50%;
    position:relative;
  }
  .dot{
    position:absolute;
    width:14px;
    height:14px;
    background-color:#ff5577;
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
  }
  .active{
    border-color:#ff5777;
  }
</style>
